<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.4Document对象中的方法介绍</title>
    <script>
        function fun() {

            // 1. 创建 element 对象
            let element = document.createElement("p");
            // 2.创建 value 并添加到 element。
            let textNode = document.createTextNode("createTextNode");
            element.append(textNode);
            // 3、设置属性方式一
            element.setAttribute("style", "color: red");
            // 3、设置属性方式二
            let styleAttr = document.createAttribute("style");
            styleAttr.value = "font-size: 2em";
            element.setAttributeNode(styleAttr);
            // 4.插入子元素
            let div = document.getElementById("div-id");
            div.appendChild(element);
            // document.body.appendChild(element);
        }

        window.onload = fun;
        fun();
    </script>
</head>
<body>
<div>
    aaaaaa
    <div id="div-id"></div>
    bbbbb
</div>
</body>
</html>